<!--
 * @Description: 
 * @Author: ZachGmy
 * @Date: 2025-07-22 14:22:54
 * @LastEditors: ShaoRuijie 1467374483@qq.com
 * @LastEditTime: 2025-07-26 09:27:01
-->
<template>
  <div>
    <!-- 设置标题 -->
    <Title title="检测月报"></Title>
    <!-- 1.提供图表容器 -->
    <div ref="bottom2" style="height: 150px; margin-top: 15px"></div>
  </div>
</template>

<script>
import { Line } from "@antv/g2plot";
import { get } from "@/utils/request";

export default {
  data() {
    return {
      monthArr:[]
    };
  },
 async mounted() {
    await this.getMonthData()
    await this.initBottom2()
  },
  methods: {
    initBottom2() {
      // 图表
      const linePlot = new Line(this.$refs.bottom2, {
      data: this.monthArr,
      xField: 'date',
      yField: 'concentration',
      seriesField: 'indicator',
    yAxis: {
  label: {
    style: { fill: '#ffffff' },
    formatter: (value) => `${value} μg/m³`, // 环境监测正确单位 ✅
  },
},
tooltip: {
  formatter: (datum) => {
    // 手动映射单位：key 是指标类型，value 是单位
    const unitMap = {
      tsp: 'μg/m³',
      pm10: 'μg/m³',
      pm25: 'μg/m³',
      noise: 'dB', // 假设 noise 单位是分贝
      temperature: '°C',
      humidity: '%',
      wind_speed: 'm/s',
      wind_direction: '°',
    };
    return {
      name: datum.indicator, 
      value: `${datum.concentration} ${unitMap[datum.indicator] || ''}`, // 拼接单位
    };
  },
},
      legend: {
        position: 'top',
      },
      smooth: true,
      // @TODO 后续会换一种动画方式
      animation: {
        appear: {
          animation: 'path-in',
          duration: 5000,
        },
      },
    });

    linePlot.render();
    },
    async getMonthData(){
      let monthData= await get('dashboard/queryMouthData');
      // console.log(monthData);
      this.monthArr = monthData.data.map(item =>{
        return {
          indicator :item.type,
          date :item.date,
          concentration :item.value,
          unit :'μg/m³', 
        }
      })
    }
  },
};
</script>

<style lang="less" scoped>
</style>